<template>
    <a-row :gutter="24" style="padding: 0px;" class="pb-0 mb-2">
        <a-col :span="12">
            <a-card style="height: 100%;" class="pb-0 mb-2" :bordered="false" title="快捷入口" :loading="cardLoading">
                <template #extra>
                    <router-link to="/flw/todoTask">更多</router-link>
                </template>
                <a-row>
                    <a-col :span="6" v-for="model in myModelList.splice(0, 12)" style="height: 6.2rem;
 display: flex;
 align-items: center;">
                        <process-card :color="model.color" :label="model.name" :icon="model.icon"
                            @click="startProcessRef.onOpen(model, 'NEW')" />
                    </a-col>

                </a-row>
            </a-card>
        </a-col>
        <a-col :span="12">
            <a-card style="height: 100%;" :bordered="false" title="我的待办">
                <template #extra>
                    <router-link to="/flw/newTask">更多</router-link>
                </template>
                <s-table ref="tableRef" :columns="columns" :data="loadData" :alert="false" bordered
                    :row-key="(record) => record.id">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex === 'title'">
                            <a-tooltip>
                                <template #title>{{ record.title }}</template>
                                {{ record.title }}
                            </a-tooltip>
                        </template>
                        <template v-if="column.dataIndex === 'abstractTitle'">
                            <a-tooltip>
                                <template #title>{{ record.abstractTitle }}</template>
                                {{ record.abstractTitle }}
                            </a-tooltip>
                        </template>
                        <template v-if="column.dataIndex === 'currentActivityName'">
                            <a-tag color="cyan">{{ record.currentActivityName }}</a-tag>
                        </template>
                    </template>
                </s-table>
            </a-card>
        </a-col>
    </a-row>
    <a-row :gutter="24" style="padding: 0px;" class="homepage">
        <a-col :span="12">

            <a-card style="height: 100%;" class="pb-0 mb-2" :bordered="false" :tab-list="tabListNoTitle"
                :active-tab-key="titleKey" @tabChange="key => onTabChange(key, 'titleKey')">
                <template #tabBarExtraContent>
                    <a-button type="primary" ghost>添加关注</a-button>
                </template>
                <a-row :gutter="14">
                    <a-col :span="8" class="mb-4" v-for="info in pmList">
                        <div class="task">
                            <div class="task-item" :title="info.name">{{ info.name }}</div>
                            <div class="task-item" > <a-progress :percent="30" size="small"
                                    :stroke-color="{ '0%': '#142F67', '100%': '#4393F2' }" /></div>
                            <div class="task-item" style="color: #999999;" :title="info.custom" > <user-outlined class="mr-2" />{{ info.custom
                                }}
                            </div>
                            <div class="task-item" style="color: #999999;">
                                <ClockCircleOutlined class="mr-2" />{{ info.createTime }}
                            </div>
                        </div>
                    </a-col>
                </a-row>

            </a-card>
        </a-col>
        <a-col :span="12">

            <a-card style="height: 100%;" class="pb-0 mb-2" :bordered="false" title="通知公告">
              
                <s-table ref="noticeTableRef" class="mb-16" :columns="noticeColumns" :data="noticeLoadData"
                    :alert="false" bordered :row-key="(record) => record.id">

                </s-table>
            </a-card>
        </a-col>
    </a-row>
    <startProcess ref="startProcessRef" />
</template>

<script setup name="home">
import StartProcess from '@/views/flw/task/newTask/startProcess.vue'
import ProcessCard from './components/processCard.vue'
import processMyApi from '@/api/flw/processMyApi'
import taskApi from '@/api/flw/taskApi'
import messageApi from '@/api/dev/messageApi'
import pmApi from '@/api/pm/pm/index'

const startProcessRef = ref()
const cardLoading = ref(false)
const myModelList = ref([])
processMyApi.processMyModelList().then((data) => {
    cardLoading.value = false


    var dd = data.sort(function (a, b) {
        return a.sortCode - b.sortCode;
    })
    myModelList.value = dd
})



const tableRef = ref()
const columns = [
    {
        title: '标题',
        dataIndex: 'title',
        ellipsis: true
    },

    {
        title: '办理人',
        dataIndex: 'assignees',
        ellipsis: true,
        width: 100,
    },
    {
        title: '发起人',
        dataIndex: 'initiatorName',
        width: 100,
    },
    {
        title: '发起时间',
        dataIndex: 'initiatorTime',
        width: 150,
    },
]

const loadData = (parameter) => {
    parameter.size=4
    return taskApi.taskTodoPage(parameter).then((res) => {
        return res
    })
}




const noticeTableRef = ref()
const noticeColumns = [
    {
        title: '主题',
        dataIndex: 'subject',
        ellipsis: true
    },
    {
        title: '正文',
        dataIndex: 'content',
        ellipsis: true
    },
    {
        title: '发送时间',
        dataIndex: 'createTime',
        ellipsis: true,
        // sorter: true,
        width: '150px'
    }
]
const noticeLoadData = (parameter) => {
    parameter.size=8
    return messageApi.messagePage(parameter).then((res) => {
        return res
    })
}

const pmList = ref([])
const loadPmData = () => {
    pmApi.proinfopage({
        current: 1,
        size: 9
    }).then((res) => {
        pmList.value = res.records
    })
}
loadPmData()

const tabListNoTitle = [
    {
        key: '0',
        tab: '我关注的',
    },
    {
        key: '1',
        tab: '我参与的',
    },
    {
        key: '2',
        tab: '最近访问',
    },
];
const titleKey = ref()
const onTabChange = (value, type) => {

};
</script>
<style>
.homepage .s-table-tool {
    margin-bottom: 0px !important;
}

.homepage .task {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.ant-table-pagination.ant-pagination {
    display: none;
}

.task-item {
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}
</style>
